<template>
  <!-- 处置场所明细 -->
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <div class="stepContent">
            <div>
                <!-- <div class="basicTitle"> 基本信息</div>
                <hr class="hrStyle" /> -->
                <el-row>
                
                    <el-col :span="8">
                        <el-form-item label="处置场所名称" prop="soilName">
                            <el-input class="fullUp" v-model="form.soilName" placeholder="请输入处置场所名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="处置场所负责人" prop="manager">
                            <el-input class="fullUp" v-model="form.manager" placeholder="请输入处置场所负责人" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="负责人联系电话" prop="managerPhone">
                            <el-input class="fullUp" v-model="form.managerPhone" placeholder="请输入负责人联系电话" />
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="8">
                        <el-form-item label="所属省" prop="provinceCode">
                            <el-select class="fullUp" v-model="form.provinceCode" clearable  placeholder="请选择所属省" @change="formProvinceChange">
                            <el-option
                                v-for="(v,index) in provinceList"
                                :key="index"
                                :label="v.provinceName"
                                :value="v.provinceCode"
                            ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="所属市" prop="cityCode">
                        <el-select class="fullUp" v-model="form.cityCode" clearable  placeholder="请选择所属市" @change="formCityChange">
                            <el-option
                            v-for="(v,index) in cityList"
                            :key="index"
                            :label="v.cityName"
                            :value="v.cityCode"
                            ></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="所属县区" prop="areaCode">
                        <el-select class="fullUp" v-model="form.areaCode" clearable  placeholder="请选择区域" @change="formAreaChange">
                            <el-option
                            v-for="(v,index) in areaList"
                            :key="index"
                            :label="v.areaName"
                            :value="v.areaCode"
                            ></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="详细地址" prop="address">
                            <el-input class="fullUp" v-model="form.address" placeholder="请输入详细地址" />
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="8">
                        <el-form-item label="有效期开始日期" prop="startDate">
                            <el-date-picker value-format="yyyy-MM-dd" class="fullUp"  v-model="form.startDate" placeholder="请输入有效期开始日期" />
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="8">
                        <el-form-item label="有效期结束日期" prop="endDate">
                            <el-date-picker value-format="yyyy-MM-dd" class="fullUp"  v-model="form.endDate" placeholder="请输入有效期结束日期" />
                        </el-form-item>
                    </el-col>

                    
                    <el-col :span="12">
                        <!-- <el-form-item label="处置场所" prop="name">
                            <el-upload
                                class="avatar-uploader"
                                :action="actionUrl"
                                :show-file-list="false"
                                :on-success="handleUploadSuccess"
                                :on-error="handleUploadError"
                                :before-upload="handleBeforeUpload">
                                <img v-if="form.name" :src="form.name" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item> -->
                        <el-form-item label="处置场所" prop="name">
                            <!-- <Editor v-model="form.name" :min-height="192"/> -->
                            <image-upload v-model="form.name" :limit="1"/>
                        </el-form-item>
                        <!-- <el-form-item label="处置场所" prop="name">
                            <file-upload v-model="form.name"/>
                        </el-form-item> -->
                    </el-col>
                </el-row>
                <!-- <hr class="hrStyle" /> -->
            </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
  </div>
</template>

<script>
import { addSoil, updateSoil } from "@/api/modules/soil";

import {provinceList,cityList,areaList} from '@/api/region/region'

export default {
  props: {
    form: {
      type: Object,
      default: {}
    },
  },
  dicts: ['disposal_type'],
  data() {
    return {
        active: 0,
        rules: { },

        // uploadUrl:  process.env.VUE_APP_BASE_API + "/common/upload",
        uploadUrl:  "http://192.168.31.156:8080/common/upload",

        provinceList: [],
        cityList: [],
        areaList: [],

        categoryList: [
          { value: '1', label: '砂石土场' },
          { value: '2', label: '土方土场' },
          { value: '3', label: '建筑垃圾土场' },
          { value: '4', label: '渣土土场' },
          { value: '5', label: '灰浆等流体土场' },
          { value: '6', label: '其他土场' },
        ],
        
        formData: {
            provinceName: '', // 省
            cityName: '', // 市
            areaName: '', // 区/县
            soilName: '', // 处置场所名称
            manager: '', // 处置场所负责人
            managerPhone: '', // 负责人联系电话
            category: '', // 处置场所类型  (1.砂石土场、2.土方土场、3.建筑垃圾土场、4.渣土土场、5.灰浆等流体土场、6.其他土场)
            startDate: '', // 许可有效期开始日期
            endDate: '', // 许可有效期结束日期
            address: '', // 详细地址
            name: '', // 处置场所：
            remark: '', // 备注
        }
    }
  },
  mounted() {
    this.initProvinceList()
    if(this.form.cityName){
      this.initCityList(this.form.provinceName)
    }
    if(this.form.areaName){
      this.initAreaList(this.form.cityCode)
    }
  },
  beforeDestroy() {
  },
  methods: {
    back() {
        this.active--
    },
    next() {
        if (this.active++ > 3) this.active = 0;
    },
    /** 提交按钮 */
    submitForm() {
      console.log(this.form)
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSoil(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.active = 0
              this.$emit("submitForm")
              return
              this.open = false;
              this.getList();
            });
          } else {
            addSoil(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.active = 0
              this.$emit("submitForm")
              return
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    
    // 取消按钮
    cancel() {
        this.$emit("cancel")
    },
    
   initProvinceList(){
       provinceList().then(response => {
         this.provinceList = response.data;
       })
   },
    
   initCityList(v){
       let obj={
         provinceCode:v
       }
       cityList(obj).then(response => {
         this.cityList = response.data;
       })
   },
   initAreaList(v){
       let obj={
         cityCode:v
       }
       areaList(obj).then(response => {
         this.areaList = response.data;
       })
   },
   //省份选择的
   formProvinceChange(v){
    console.log(v, 'v')
      if(v){
        this.initCityList(v);
      }
     var obj = {};
     obj = this.provinceList.find(function(item) {
       return item.provinceCode === v;
     });
     this.form.provinceName = '';
     if(obj && obj.provinceName){
      this.form.provinceName = obj.provinceName;
     } 
     // this.form.provinceName = obj.provinceName;

     this.cityList = [];
     this.areaList = [];

     
     this.form.cityCode = ''
     this.form.cityName = ''
     this.form.areaCode = ''
     this.form.areaName = ''

   },

   //城市选择的
   formCityChange(v){
    
      if(v) {
        this.initAreaList(v);
        
      }

     // this.initAreaList(v);

     var obj = {};
     obj = this.cityList.find(function(item) {
       return item.cityCode === v;
     });
     this.form.cityName = '';
     if(obj && obj.cityName){
      this.form.cityName = obj.cityName;
     } 
     // this.form.cityName = obj.cityName;
     
     this.form.cityCode = v;
     this.areaList = [];
     
     this.form.areaCode = ''
     this.form.areaName = ''
   },
   formAreaChange(v){
     var obj = {};
     obj = this.areaList.find(function(item) {
       return item.areaCode === v;
     });
     console.log("area")
     console.log(obj)

     this.form.areaName = '';
     if(obj && obj.areaName){
      this.form.areaName = obj.areaName;
     } 

     // this.form.areaName = obj.areaName;

     this.form.areaCode = v;
   },
   
    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      const type = ["image/jpeg", "image/jpg", "image/png", "image/svg"];
      const isJPG = type.includes(file.type);
      // 检验文件格式
      if (!isJPG) {
        this.$message.error(`图片格式错误!`);
        return false;
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      return true;
    },
    handleUploadSuccess(res, file) {
      // 如果上传成功
      if (res.code == 200) {
        // 获取富文本组件实例
        let quill = this.Quill;
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.url为服务器返回的图片地址
        quill.insertEmbed(length, "image", process.env.VUE_APP_BASE_API + res.fileName);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
    },
    handleUploadError() {
      this.$message.error("图片插入失败");
    },

   beforeAvatarUpload() {

   },

  }
}
</script>

<style lang="scss" scoped>
  .stepContent{
  }
  .basicTitle{
    margin: 5px 0;
    font-size: 16px;
    font-weight: bold;
  }
  .dialog-footer{
    text-align: right;
  }
  .hrStyle{
    border: none; /* 移除默认的边框 */
    height: 1px; /* 设置高度 */
    background-color: #999; /* 设置颜色 */
    margin: 20px 0; /* 设置外边距 */
  }


  .el-upload {
    border: 1px dashed #d9d9d9;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;

    border: 1px dashed #d9d9d9;
    border-radius: 10px;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .fullUp{
    width: 100%;
  }
</style>